<template>
	<view class="app-content-winposter">

		<SeachNav @search="searchKey"  @openPopup="openPopup"></SeachNav>
		<screen :filterMaskData.sync="filterMaskData"  @filterQuery="filterQuery"  @filterBtnCall="filterQuery" ref="screen"></screen>

		<counsel-list
			ref="counsel"
			v-if="!list.loading"
			:list="list"
			:counselData="counselData"
			:delBtn="true"
			@goDetail="goDetail"
			@toMaterialList="toMaterialList"
			@pushIteam="pushIteam"
			@popularize="popularize"
			@del="delPoster">
		</counsel-list>

		<add-com-icon v-if="$util.shieldReview()" @add="addPoster" />

	</view>
</template>

<script>
import SeachNav from '@/pages/components/SeachNav.vue'
import CounselList from '@/pages/getGuest/components/CounselList.vue'
import screen from '@/components/App_screen.vue'
import AddComIcon from '@/components/module/AddComIcon.vue'
import qs from 'qs'

import { getList, getClassList, del } from '@/api/poster'

import { list } from '@/mixins'
import { mapGetters, mapState } from 'vuex'
export default {
	name: 'winPoster',
	mixins: [list],
	components: {
		SeachNav,
		CounselList,
		screen,
		AddComIcon
	},
	data() {
		return {
			form: {
				poster_name: '',
				cat_id: ''
			},
			filterMaskData: [
				{
					title: '线上海报',
					// type: 2,
					key: 'cat_id',
					list: []
				},
				{
					title: '来源',
					key: 'source_type',
					list: [
						{
							name: '平台',
							id: 1,
							status: false
						},
						{
							name: '我的',
							id: 2,
							status: false
						}
					]
				}
			],
			counselData: {
				title: '获客海报',
				type: 'poster',
				shareType: 10,
				myKey: {
					id: 'poster_id',
					images: 'cover_image',
					title: 'copywriting'
				}
			}
		}
	},
	onLoad(option) {
		this.option = option
		this.setSelectList()
	},
	onShow() {
		this.init()
	},
	// 下拉刷新
	onPullDownRefresh() {
		let that = this
		this.resetList()
		this.getCaseWin(this.option).then(res => {
			uni.stopPullDownRefresh()
		})
	},
	// 加载更多
	onReachBottom() {
		if (this.list.loading) {
			return
		}
		if (this.list.data.length < this.list.total) {
			this.getCaseWin(this.option).then(res => {
				uni.stopPullDownRefresh()
			})
		} else {
			uni.showToast({
				title: '没有更多了',
				duration: 2000,
				icon: 'none'
			})
		}
	},
	computed: {
		...mapGetters({ userInfo: 'getUser' })
	},
	methods: {
		// ===初始化===
		init() {
			this.getCaseWin()
			this.getSelectList()
		},

		// ===搜索===
		searchKey(val) {
			this.form.name = val
			this.resetList()
			this.getCaseWin()
		},
		openPopup() {
			this.$refs.screen.openPopup()
		},
		// ===筛选===
		setSelectList() {
			if (this.userInfo.boss_user_id > 0 || this.userInfo.role_id == 1 || this.userInfo.role_id == 2) {
				this.filterMaskData[1].list.push({
					name: '企业',
					id: 3,
					status: false
				})
			}
		},
		getSelectList() {
			let that = this
			getClassList().then(res => {
				if (res.status === 'success') {
					that.filterMaskData[0].list = res.data[0].cat_list.map(i => ({
						name: i.cat_name,
						id: i.cat_id,
						status: false
					}))
				}
			})
		},
		// ===重置筛选===
		filterQuery(val) {
			this.form = {
				...this.form,
				...val.form
			}
			this.resetList()
			this.getCaseWin()
		},

		// ===列表数据===
		getCaseWin() {
			let that = this
			return getList({
				page: that.list.page,
				limit: that.list.limit,
				...that.form
			}).then(res => {
				that.completes(res)
			})
		},
		// 列表跳转参数
		forParams(data) {
			let param = this.$refs.counsel.forParams(data)
			let params = {
				...param,
				relevance_id: data.article_relevance_id,
				case_article_id: data.article_id,
				resource_type: 1,
				imgUrl: data.cover_img,
				cat_name: data.cat_name,
				from: 'caseOrArticle'
			}
			return {

			}
		},

		// 朋友圈推广
		toMaterialList(data, type) {
			let param = this.$refs.counsel.forParams(data)
			let params = {
				...param,
				status: data.cat_name,
				type: 1,
				from_origin: 1
			}

			uni.navigateTo({
				url: `/pages/getGuest/shareList?${this.commonJS.queryData(params)}`
			})
		},
		// ===推给团队===
		pushIteam(data, type) {
			let param = this.$refs.counsel.forParams(data)
			let params = {
				...param,
				imgUrl: param.images,
				type: 3
			}
			uni.navigateTo({
				url: `/pages/getGuest/pushTeam?${qs.stringify(params)}`
			})
		},
		// 推广获客
		popularize(val) {
			this.$nextTick(() => {
				this.$refs.counsel.$refs.sharePoster.showMask(val[this.counselData.myKey.id], true)
			})
		},
		// 进入详情
		goDetail(val) {
			let query = {
				poster_id: val.poster_id,
				owner_user_id: this.option.owner_user_id
			}
			uni.navigateTo({
				url: `/pages/getGuest/poster/onlineDetail${this.commonJS.queryData(query)}`
			})
		},
		// ===新增海报===
		addPoster() {
			let query = {
				owner_user_id: this.option.owner_user_id
			}
			uni.navigateTo({
				url: `/pages/getGuest/addPoster${this.commonJS.queryData(query)}`
			})
		},
		// 删除海报
		delPoster(data) {
			let that = this
			uni.showModal({
				title: '确认',
				content: '是否要删除该海报！',
				success: function(res) {
					if (res.confirm) {
						del({ poster_id: data.poster_id }).then(res => {
							if (res.status === 'success') {
								that.$toast('删除成功!')

								that.resetList()
								that.getCaseWin()
							} else {
								that.$toast(res.errors.message)
							}
						})
					}
				}
			})
		}
	}
}
</script>

<style lang="scss">
.app-content-winposter .desc-img_box {
	width: 286px !important;
	height: 506px !important;
}

</style>
<style lang="scss" scoped>
	.app-content-winposter {
		line-height: 1;
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	.filter_wrap {
		padding-left: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		color: #666666;
		border-right: 1px;
		& > view {
			padding: 0 5px;
		}
		&::after {
			content: '';
			height: 60px;
			position: absolute;
			background-color: #dddddd;
			width: 1Px;
			left: 0;
			top: 50%;
			transform: translate(0 ,-50%);
		}
	}
</style>
